<!--
 * @Author: your name
 * @Date: 2021-03-26 19:20:23
 * @LastEditTime: 2021-06-18 16:06:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /medicine-web/src/views/index.vue
-->
<template>
  <div class="detail-container">
    <van-nav-bar
      title="视频详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail-video">
      <MyVideo :playerData="playerData" v-if="Object.keys(playerData).length > 0" />
    </div>
    <div class="detail-select-item">
      <span>详情</span>
    </div>
    <div class="detail-select-content">
      <div class="detail-select-content__title">
        {{detailInfo.title}}
      </div>
      <div class="detail-select-content__content" v-html="detailInfo.remark"></div>
      <FloatBtn class="float-btn-pattern" @click.stop.native="showQrcodeFunc" />
      <van-popup v-model="showQrcode" :round="true">
        <div class="qrcode-container">
          <img :src="qrcodeImage" alt="" style="width: 120px; height: 120px;">
          <div class="qrcode-tips">请将二维码截图分享给其他人</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Toast } from 'vant';
import FloatBtn from '@/components/FloatButton/index.vue'
import MyVideo from '@/components/MyVideo/index.vue'
import { getCookie } from '@/utils/auth.js';
export default {
  name: 'detailPage',
  components: {
    FloatBtn,
    MyVideo,
  },
  data() {
    return {
      titleArray: [
        { id: 1, name: '详情' },
      ],
      showQrcode: false,
      detailInfo: {}, // 视频详情
      qrcodeImage: '', // 二维码图片
      playerData: {}
    }
  },
  methods: {
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
      }
      return false;
    },
    showQrcodeFunc() {
      if (this.$route.query.id) {
        this.$action('getQrcodePic', { openid: getCookie('openid'), id: this.$route.query.id }).then((res) => {
          this.qrcodeImage = this.$uploadUrl + res.data
          this.showQrcode = true
        })
      }
    },
    onClickLeft () {
      // this.$router.go(-1)
      this.$router.replace('/main')
    },
    fetchData () {
      if (this.$route.query.id) {
        this.$action('getVideoDetail', { openid: getCookie('openid'), id: this.$route.query.id }).then((res) => {
          this.detailInfo = res.data.video;
          this.playerData.thumb_pic = res.data.video.cover;
          this.playerData.annex = [res.data.video.video_address];
          this.playerData.timer = res.data.video.duration;
          // this.promotion_openid = res.data.promotion_openid
        })
      }
    }
  },
  mounted () {
    this.fetchData();
  },
  computed: {
    ...mapGetters({})
  },
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
.detail-container {
  min-height: 1137px;
  overflow-y: scroll;
}
.detail-video {
  margin-top: 6px;
  width: 100vw;
  height: 348px;
  background-color: #000;
}
.detail-select-item {
  height: 76px;
  background-color: #F4F4F4;
  line-height: 76px;
  padding-left: 100px;
  span {
    font-size: 22px;
    font-weight: bold;
    color: #E60B12;
    position: relative;
  }
  span::after {
    content: '';
    display: inline-block;
    width: 21px;
    height: 3px;
    background-color: #E60B12;
    position: absolute;
    bottom: -11px;
    left: calc(50% - 10px)
  }
}
.detail-select-content {
  padding: 27px 26px;
  position: relative;
  .detail-select-content__title {
    color: #333;
    font-weight: bold;
    font-size: 20px;
  }
  .detail-select-content__content {
    margin-top: 43px;
    font-size: 16px;
    color: #999;
    text-indent: 42px;
  }
  .float-btn-pattern {
    position: fixed;
    bottom: 123px;
    right: 13px;
    z-index: 5;
  }
}
.qrcode-container {
  padding: 37px 69px 33px 65px;
  text-align: center;
}
.qrcode-tips {
  margin-top: 29px;
  color: #999999;
  font-size: 15px;
  white-space: nowrap;
}
</style>